<template>
  <div class="results-page">
    <MovieFlexCard
      v-for="movie in results"
      :key="movie.id"
      :movie="movie"
    />
  </div>
</template>

<script>
import { searchMovies } from '../utility/untility functions';
import MovieFlexCard from './MovieFlexCard.vue';
import router from "@/router/index.ts";
import {base64DataToImgURL} from "@/utils/Base64Util.js";
export default {
  components: { MovieFlexCard },
  data() {
    return {
      results: [],
    };
  },
  async mounted() {
    var name = router.currentRoute.value.query.name;
    var type = router.currentRoute.value.query.type;
    var query = {
      name: name,
      type: type,
      current: 1,
      pagesize: 100,
    };
    console.log('Search query:', query);
    let list = await searchMovies(query);
    for (let i = 0; i < list.length; i++) {
      if(list[i].img != null && list[i].img.length > 0)
        list[i].img = base64DataToImgURL(list[i].img);
    }
    this.results = list;

    console.log('Search results:', this.results);
    // Here you would fetch and display search results
  },
}
</script>

<style scoped>
.results-page {
  overflow: scroll;
  padding: 20px;
  background-color: #333;
  color: white;
}
</style>
